import {Image, StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import {Stack, useLocalSearchParams, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useState} from "react";
import avator from '@/assets/images/me/avator.png'
import {useActionSheet} from "@expo/react-native-action-sheet";
import PuppModal from "@/components/pupoModal"
import {
    getActivityMemberLisRequest,
    getActivityAuditLisRequest,
    postApprovalJoinRequest,
    postRejectJoinRequest,
    postRefoundRequest,
    postApprovalMoney,
    postRejectMoney
} from "@/services/activityServices";
import {loadingService} from "@/utils/loadingServer";
import {showToast} from "@/utils/rootToast";
import Textarea from "@/components/Textarea";
import * as React from "react";
import Empty from "@/components/empty";


export default function memberAdminScreen() {

    const router = useRouter();

    const [active, setActive] = useState(1);
    const [showReject, setShowReject] = useState(false);
    const [showResolve, setShowResolve] = useState(false);
    const [memberList, setMemberList] = useState([]);
    const [aditList, setAditList] = useState([]);
    const [selectUser, setSelectUser] = useState({});
    const [reason, setReason] = useState("");
    const [refound, setRefound] = useState([]);

    const { showActionSheetWithOptions } = useActionSheet();

    const routerParms = useLocalSearchParams();

    const options = ['请TA退出活动', '取消'];

    const openActionSheet = () => {
        const cancelButtonIndex = 1;

        showActionSheetWithOptions(
            {
                options,
                cancelButtonIndex,
            },
            (buttonIndex) => {
                switch (buttonIndex) {
                    case 0:
                        console.log('请TA退出活动');
                        break;
                    default:
                        break;
                }
            }
        );
    };

    const getActivityMemberList = function () {
        getActivityMemberLisRequest(routerParms?.activityId)
            .then((res: any) => {
                console.log('res', res)
                setMemberList(res.data.userList)
            })
            .catch((err) => {
                console.log('err', err);
            })
    };

    const getActivityAditList = function () {
        getActivityAuditLisRequest(routerParms?.activityId)
            .then((res: any) => {
                console.log('getActivityAditList', res)
                setAditList(res?.data?.userList)
            })
            .catch((err) => {
                console.log('err', err);
            })
    };

    const getActivityRefoundList = function () {
        postRefoundRequest(routerParms?.activityId)
            .then((res: any) => {
                console.log('getActivityAditList', res)
                setRefound(res?.data?.userList)
            })
            .catch((err) => {
                console.log('err', err);
            })
    };

    const approvalJoin = function (params) {
        const data = {
            activityId: routerParms?.activityId,
            approvedUid: params.uid
        };
        loadingService.show();
        postApprovalJoinRequest(data)
            .then(() => {
                loadingService.hide();
                showToast("加入活动成功!");
                getActivityAditList();
                setShowReject(false)
                getActivityMemberList();
            })
            .catch((err) => {
                console.log('err', err);
                loadingService.hide();
            })
    };

    const rejectJoin = function (params) {
        const data = {
            activityId: routerParms?.activityId,
            rejectedUid: params.uid,
            reason: reason
        };
        if (!reason) return showToast("请输入拒绝理由！")
        loadingService.show();
        postRejectJoinRequest(data)
            .then(() => {
                loadingService.hide();
                showToast("拒绝加入成功!");
                getActivityAditList();
                setShowResolve(false);
            })
            .catch((err) => {
                console.log('err', err);
                loadingService.hide();
            })
    };

    useEffect(() => {
        getActivityMemberList();
        getActivityAditList();
        getActivityRefoundList();
    }, [])

    const rejcetTextChange = function (val) {
        setReason(val);
    };

    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '成员管理', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#FFF', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <View style={styles.createTicketContainer}>
                <View style={styles.createTicketHeader}>
                    <TouchableOpacity onPress={() => setActive(0)}>
                        <View style={[ active == 0 ? styles.headerItem : "" ]}>
                            <Text style={[ active == 0 ? styles.activeColor : "" ]}>
                                审核成员
                            </Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => setActive(1)}>
                        <View style={[ active == 1 ? styles.headerItem : "" ]}>
                            <Text style={[ active == 1 ? styles.activeColor : "" ]} >
                                成员管理
                            </Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => setActive(2)}>
                        <View style={[ active == 2 ? styles.headerItem : "" ]}>
                            <Text style={[ active == 2 ? styles.activeColor : "" ]} >
                                退款管理
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={styles.memberContainer}>
                    {
                        active == 0 && (
                            <>
                                {
                                    aditList.length > 0 && (
                                        aditList.map((item: any, index: number) => {
                                            return (
                                                <View style={styles.examItem} key={index}>
                                                    <View style={styles.avator}>
                                                        <Image source={{ uri: item.avatar }} style={{ width: "100%", height: "100%" }} />
                                                    </View>
                                                    <View style={styles.examItemContent}>
                                                        <View style={styles.examHeaderTitle}>
                                                            <Text style={styles.examHeaderTitleText}>{ item.nickname }</Text>
                                                        </View>
                                                        {/*<View style={styles.examHeaderContent}>*/}
                                                        {/*    <Text style={styles.examHeaderContentText}>通过一下通过一下通过一下通 过一下</Text>*/}
                                                        {/*</View>*/}
                                                    </View>
                                                    <View style={styles.examItemBtnWrap}>
                                                        <TouchableOpacity onPress={() => {
                                                            setShowResolve(true);
                                                            setSelectUser(item)
                                                            setReason("")
                                                        }}>
                                                            <View style={styles.reject}>
                                                                <Text style={styles.rejectText}>拒绝</Text>
                                                            </View>
                                                        </TouchableOpacity>
                                                        <TouchableOpacity onPress={() => {
                                                            setShowReject(true)
                                                            setSelectUser(item);
                                                        }}>
                                                            <View style={styles.acctep}>
                                                                <Text style={styles.acctepText}>通过</Text>
                                                            </View>
                                                        </TouchableOpacity>
                                                    </View>
                                                </View>
                                            )
                                        })
                                    )
                                }
                                {
                                    aditList.length <= 0 && (
                                        <Empty title={"空空如也～"}/>
                                    )
                                }

                                {/*<View style={styles.examItem}>*/}
                                {/*    <View style={styles.avator}>*/}
                                {/*        <Image source={avator} style={{ width: "100%", height: "100%" }} />*/}
                                {/*    </View>*/}
                                {/*    <View style={styles.examItemContent}>*/}
                                {/*        <View style={styles.examHeaderTitle}>*/}
                                {/*            <Text style={styles.examHeaderTitleText}>猛从小火煮</Text>*/}
                                {/*        </View>*/}
                                {/*        <View style={styles.examHeaderContent}>*/}
                                {/*            <Text style={styles.examHeaderContentText}>通过一下通过一下通过一下通 过一下</Text>*/}
                                {/*        </View>*/}
                                {/*    </View>*/}
                                {/*    {*/}
                                {/*        false && (*/}
                                {/*            <View style={styles.examItemBtnWrap}>*/}
                                {/*                <TouchableOpacity onPress={() => setShowResolve(true)}>*/}
                                {/*                    <View style={styles.reject}>*/}
                                {/*                        <Text style={styles.rejectText}>拒绝</Text>*/}
                                {/*                    </View>*/}
                                {/*                </TouchableOpacity>*/}
                                {/*                <TouchableOpacity>*/}
                                {/*                    <View style={styles.acctep}>*/}
                                {/*                        <Text style={styles.acctepText}>通过</Text>*/}
                                {/*                    </View>*/}
                                {/*                </TouchableOpacity>*/}
                                {/*            </View>*/}
                                {/*        )*/}
                                {/*    }*/}

                                {/*    {*/}
                                {/*        true && (*/}
                                {/*            <View style={styles.rejectStatus}>*/}
                                {/*                <Text style={styles.examItemBtnWrapText}>已拒绝</Text>*/}
                                {/*            </View>*/}
                                {/*        )*/}
                                {/*    }*/}

                                {/*    {*/}
                                {/*        false && (*/}
                                {/*            <View style={styles.rejectStatus}>*/}
                                {/*                <Text style={styles.examItemBtnWrapText}>已通过</Text>*/}
                                {/*            </View>*/}
                                {/*        )*/}
                                {/*    }*/}
                                {/*</View>*/}
                            </>
                        )
                    }

                    {
                        active == 1 && (
                            <>
                                {
                                    memberList.length > 0 && (
                                        memberList.map((item: any, index: number) => {
                                            return (
                                                <View style={styles.examItem} key={index}>
                                                    <View style={styles.avator}>
                                                        <Image source={{ uri: item.avatar }} style={{ width: "100%", height: "100%" }} />
                                                    </View>
                                                    <View style={[styles.examItemContent, { width: 240, paddingTop: 0, }]}>
                                                        <View style={styles.examHeaderTitle}>
                                                            <Text style={styles.examHeaderTitleText}>{ item.nickname }</Text>
                                                        </View>
                                                    </View>
                                                    {
                                                        item.role <= 2 && (
                                                            <View style={styles.examItemBtnWrap}>
                                                                <TouchableOpacity onPress={openActionSheet}>
                                                                    <View style={styles.acctep}>
                                                                        <Text style={styles.acctepText}>管理</Text>
                                                                    </View>
                                                                </TouchableOpacity>
                                                            </View>
                                                        )
                                                    }

                                                </View>
                                            )
                                        })
                                    )
                                }
                                {
                                    memberList.length <= 0 && (
                                        <Empty title={"空空如也～"}/>
                                    )
                                }
                            </>
                        )
                    }

                    {
                        active == 2 && (
                            <>
                                {
                                    refound.length > 0 && (
                                        refound.map((item: any, index: Number) => {
                                            return (
                                                <View style={styles.examItem} key={index}>
                                                    <View style={styles.avator}>
                                                        <Image source={{ uri: item.avatar }} style={{ width: "100%", height: "100%" }} />
                                                    </View>
                                                    <View style={styles.examItemContent}>
                                                        <View style={styles.examHeaderTitle}>
                                                            <Text style={styles.examHeaderTitleText}>{ item.nickname }</Text>
                                                        </View>
                                                        {/*<View style={styles.examHeaderContent}>*/}
                                                        {/*    <Text style={styles.examHeaderContentText}>通过一下通过一下通过一下通 过一下</Text>*/}
                                                        {/*</View>*/}
                                                    </View>
                                                    <View style={styles.examItemBtnWrap}>
                                                        <TouchableOpacity onPress={() => setShowResolve(true)}>
                                                            <View style={styles.reject}>
                                                                <Text style={styles.rejectText}>拒绝</Text>
                                                            </View>
                                                        </TouchableOpacity>
                                                        <TouchableOpacity onPress={() => setShowReject(true)}>
                                                            <View style={styles.acctep}>
                                                                <Text style={styles.acctepText}>通过</Text>
                                                            </View>
                                                        </TouchableOpacity>
                                                    </View>
                                                </View>
                                            )
                                        })
                                    )
                                }

                                {
                                    refound.length <= 0 && (
                                        <Empty title={"空空如也～"}/>
                                    )
                                }

                            </>
                        )
                    }

                </View>
            </View>
            <PuppModal
                visible={showReject}
                title="通过"
                okCancel={() => setShowReject(false)}
                onOk={() => approvalJoin(selectUser)}
            >
                <View style={styles.rejectModal}>
                    <Text style={styles.rejectText}>确认通过成员加入该社群</Text>
                </View>
            </PuppModal>

            <PuppModal
                visible={showResolve}
                title="拒绝"
                okCancel={() => setShowResolve(false)}
                onOk={() => rejectJoin(selectUser)}
            >
                <View style={{ marginBottom: 32 }}>
                    <Text style={{textAlign: "left", marginBottom: 10, color: "#676978"}}>确认拒绝该成员加入</Text>
                    <Textarea
                        maxLength={50}
                        placeholder={'请填写拒绝原因'}
                        value={reason}
                        placeholderTextColor={'#c7c7c7'}
                        underlineColorAndroid={'transparent'}
                        style={ styles.signatureTextInput}
                        onChangeText={rejcetTextChange}
                    />
                </View>

            </PuppModal>
        </View>

    );
}

const styles = StyleSheet.create({
    createTicketContainer: {
        flex:1,
    },
    createTicketHeader: {
        flexDirection: "row",
        backgroundColor: "#fff",
        paddingHorizontal: 40,
        justifyContent: "space-between",
    },
    headerItem: {
        borderBottomWidth: 3,
        paddingBottom: 2,
        borderColor: "#EC6138",
        borderRadius: 1,
    },
    activeColor: {
        color: "#EC6138"
    },
    memberContainer: {
        padding: 12,
    },
    examItem: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: 20,
    },
    avator: {
        width: 46,
        height: 46,
        borderRadius: 20,
        overflow: "hidden"
    },
    examItemContent: {
        marginLeft: 10,
        width: 180,
        paddingTop: 7,
    },
    examItemBtnWrap: {
        flex: 1,
        flexDirection: "row",

    },
    examHeaderTitle: {

    },
    examHeaderTitleText: {
        fontSize: 16,
    },
    examHeaderContent: {

    },
    examHeaderContentText: {
        fontSize: 14,
        color: "#9C9EAC",
        marginTop: 6,
    },
    reject: {
        paddingVertical: 7,
        paddingHorizontal: 16,
        borderWidth: 0.5,
        borderColor: "#C0C3CE",
        borderRadius: 15,
    },
    rejectText: {
        fontSize: 14,
    },
    acctep: {
        paddingVertical: 7,
        paddingHorizontal: 16,
        borderWidth: 0.5,
        borderColor: "#EC6138",
        borderRadius: 15,
        backgroundColor: "#EC6138",
        marginLeft: 10
    },
    acctepText: {
        fontSize: 14,
        color: "#fff",
    },
    rejectModal: {
        marginBottom: 34,
        marginTop: 14,
    },
    rejectText: {
        textAlign: "center",
        fontSize: 16,
        color: "#676978"
    },
    examItemBtnWrapText: {
        color: "#676978",
    },
    rejectStatus: {
        flexDirection: "row",
        justifyContent: "flex-end",
        flex: 1,
    },
    signatureTextInput: {
        backgroundColor: "#F7F7F7",
        height: 100,
        padding: 12,
        fontSize: 14,
        flex: 1,
        color: "#9C9EAC",
    },
});
